<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue2-source-code</title>
  <link href="/src/assets/imgs/medicine.jpg" rel="icon">
  <script src="/dist/vue.js"></script>
</head>

<body>
  <div id="app" style="color: black; font-size: 16px;">hello {{msg}} {{obj.name}} {{nameAndAge}}
    <h2 id="h">张三{{objList}}</h2>
    <my-button id="abc"></my-button>
  </div>
  <script>
    // Vue.Mixin({
    //   created() {
    //     console.log("created1");
    //   },
    // });
    // Vue.Mixin({
    //   created() {
    //     console.log("created2");
    //   },
    //   lzc() { }
    // });
    Vue.component("my-button", {
      template: "<button>按钮</button>"
    })
    let vm = new Vue({
      el: "#app",
      data: {
        msg: 2,
        name: 'cb',
        obj: {
          name: "lzc",
          age: 18
        },
        list: [1, 2, 3, 4, 5],
        objList: [{ a: 1 }, { b: 2 }, { c: 3 }, { d: 4 }]
      },
      // template: `<div id="app" style="color: lime; font-size: 12px;">hello {{msg}}  {{obj.name}}<h2 id="h">张三</h2></div>`,
      // render(h) {
      //   return h('div', {
      //     class: 'lzc'
      //   })
      // },
      // render(h) {
      //   return h('div', `render-${this.msg}`);
      // },
      // beforeCreate() {
      //   console.log("beforeCreate");
      // },
      // created() {
      //   console.log("created3");
      // },
      // updated() {
      //   console.log("updated");
      // },
      // mounted() {
      //   console.log("mounted");
      // },
      computed: {
        nameAndAge() {
          return this.name + this.obj.age;
        }
      },
      watch: {
        // 'obj.name': {
        //   handler: 'handlerFn',
        //   immediate: true,
        //   deep: true
        // },
        // msg(newVal, oldValue) {
        //   console.log("msg==>", newVal, oldValue);
        // }
      },

      methods: {
        handlerFn(newVal, oldVal) {
          console.log("watch name==>", newVal, oldVal);
        }
      }
    })
    setTimeout(() => {
      // 下面修改了4次数据，vNode就会被重新渲染4次，性能太低
      // 数据更新多次，实际只需要重新渲染1次即可，批量处理，使用异步
      vm.obj.name = '李志聪';
      vm.objList.push({ e: 5 });
      vm.objList.push({ e: 6 });
      vm.msg = 'two';
      vm.name = "congbo";
      // vm.$nextTick(() => {
      //   console.log("innerHTML==>", vm.$el.innerHTML);
      // })
    }, 1000)
    /*
      1、数据变化：自动更新视图，vm._update(vm._render());
      2、vue中更新组件策略：以组件为单位，给每一个组件添加一个watcher，属性变化之后，调用这个watcher
    */
    // console.log("%c vm ==>", "color:lime;font-weight: bold;", vm);
  </script>
</body>

</html>